<template>
    <div class="widget-templates">
        <draggable
            :list="list"
            :clone="cloneComponent"
            :item-key="e => e.eles.type"
            v-bind="dragOptions"
            class="widget-templates-list"
            @end="onEnd"
        >
            <template #item="{ element }">
                <div @click="onClickComponent(element)" class="widget-template-item">
                    <div class="item-icon">
                        <el-icon>
                            <component :is="`icon-widget-${element.eles.type}`" />
                        </el-icon>
                    </div>
                    <div class="item-title">
                        {{ element.component.title }}
                    </div>
                    <a v-if="!!element.component.helpHref" :href="element.component.helpHref" target="_blank" class="item-help" @click.stop="() => ({})">
                        <span class="item-help-txt">?</span>
                        <span class="item-help-mark"></span>
                    </a>
                </div>
            </template>
        </draggable>
    </div>
</template>

<script>
import { computed, defineComponent, toRefs } from 'vue'
import { useEditStore } from '@/store'
import useWidget from '@/libs/edit/widgetData'
import useWidgetDraggable from '@/libs/edit/widgetDraggable'
import useBaseStyle from '@/libs/edit/baseStyle'
import widgetTemplates from '@/components/edit/template-data/widget-data'
export default defineComponent({
    name: 'WidgetTemplates',
    props: {
        types: {
            type: Array,
            default: () => ([])
        },
        // 显示全部
        showAll: {
            type: Boolean,
            default: false
        }
    },
    emits: [
        'click'
    ],
    setup(props, { emit }) {
        const { types, showAll } = toRefs(props)

        const editStore = useEditStore()

        const {
            onCloneWidget,
            onSelectWidget
        } = useWidget()

        const {
            templateDraggableConfig
        } = useWidgetDraggable()

        const baseStyle = computed(() => editStore.style)
        const {
            onSetWidgetBaseStyle
        } = useBaseStyle(baseStyle.value)
        
        const list = computed(() => {
            if (showAll.value) {
                return Object.values(widgetTemplates)
            }
            return types.value.filter(type => widgetTemplates[type]).map(type => widgetTemplates[type])
        })
        // 拖拽配置
        const dragOptions = templateDraggableConfig
        // 当前克隆的模板控件
        let cloneTemplateData = null

        const cloneComponent = data => {
            const cloneData = onCloneWidget(data)
            onSetWidgetBaseStyle(cloneData)
            cloneTemplateData = cloneData
            return cloneData
        }
        const onEnd = e => {
            if (e.from !== e.to) { // 新增
                onSelectWidget([cloneTemplateData.eles.id])
            }
        }
        const onClickComponent = data => {
            data = onCloneWidget(data)
            onSetWidgetBaseStyle(data)
            emit('click', data)
        }

        return {
            list,
            dragOptions,
            cloneComponent,
            onEnd,
            onClickComponent
        }
    }
})
</script>

<style lang="less" scoped>
.widget-templates-list {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    box-sizing: border-box;
    margin-top: 1px;
    width: calc(100% + 4px);
    .widget-template-item {
        max-width: calc(100% / 3);
        flex: calc(100% / 3);
        height: 90px;
        text-align: center;
        border: 1px dashed var(--edit-border-color);
        margin: -1px 0 0 -1px;
        background-color: var(--edit-bg-color);
        position: relative;
        float: left;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        cursor: pointer;
        &:hover {
            background-color: var(--edit-color-primary-light-8);
            .item-help {
                display: block;
            }
        }
        .item-icon {
            line-height: 1;
            font-size: 24px;
            color: var(--edit-text-color-regular);
        }
        .item-title {
            // 
        }
        .item-help {
            display: none;
            .item-help-txt {
                position: absolute;
                bottom: -2px;
                right: 7px;
                z-index: 1;
                color: var(--edit-color-white);
                font-size: 16px;
                pointer-events: none;
            }
            .item-help-mark {
                position: absolute;
                right: -28px;
                bottom: -29px;
                width: 55px;
                height: 55px;
                line-height: 18px;
                background-color: var(--edit-text-color-disabled);
                transform: rotate(45deg);
                cursor: pointer;
                &:hover {
                    background-color: var(--edit-color-primary);
                }
            }
        }
    }
}
</style>